<template>
  <section>
    <!--工具条-->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple" style="height: 50px">
         <el-button type="primary" icon="el-icon-refresh" class="refresh" @click="reloadnow">刷新</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" class="add" @click="Adduniversity">新增学校</el-button>
       </div>
      </el-col>
    </el-row>

    <!--列表-->
    <el-table
      :data="datalist"
      border highlight-current-row v-loading="listLoading"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.schoolList"
            border highlight-current-row v-loading="listLoading"
            style="width: 100%">
              <el-table-column label="学院名称" prop="school.name"></el-table-column>
              <el-table-column label="管理员" prop="schoolManager.username"></el-table-column>
              <el-table-column  label="操作" prop="dataList">
                <template slot-scope="scope" >
                  <el-button size="mini" @click="Editschool(scope.$index, scope.row)" icon="el-icon-edit" >编辑学院</el-button>
                  <el-button size="mini" @click="Deleteschool(scope.$index, scope.row)" icon="el-icon-edit" >删除学院</el-button>
                  <el-button size="mini" @click="showDeatil(scope.$index, scope.row)" icon="el-icon-view" >管理员</el-button>
                </template>
              </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="学校名称" prop="university.name"></el-table-column>
      <el-table-column  label="操作" prop="dataList">
        <template slot-scope="scope" >
          <el-button size="mini" @click="Addschool(scope.$index, scope.row)" icon="el-icon-edit" >创建学院</el-button>
          <el-button size="mini" @click="Edituniversity(scope.$index, scope.row)" icon="el-icon-edit" >编辑</el-button>
          <el-button size="mini" @click="Deleteuniversity(scope.$index,scope.row)" icon="el-icon-edit" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增/编辑学校页面-->
    <el-dialog :title="formTitle" :visible.sync="formVisible1" :close-on-click-modal="false">
      <el-form :model=" formdata1" label-width="80px"  :rules="formRules1"ref="datalist" >
        <el-form-item label="学校名称" prop="name">
          <el-input v-model="formdata1.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible1= false">取消</el-button>
        <el-button type="primary" v-on:click="SaveSubmit" :loading="submitLoading">保存</el-button>
      </div>
    </el-dialog>

    <!--新增/编辑学院页面-->
    <el-dialog :title="formTitle" :visible.sync="formVisible2" :close-on-click-modal="false">
      <el-form :model=" formdata2" label-width="80px"  :rules="formRules2"ref="datalist" >
        <el-form-item label="学院名称" prop="name">
          <el-input v-model="formdata2.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible2= false">取消</el-button>
        <el-button type="primary" v-on:click="SaveSubmit" :loading="submitLoading">保存</el-button>
      </div>
    </el-dialog>

    <!--管理员详细信息界面-->
    <el-dialog :title="formTitle" :visible.sync="formVisible3" :close-on-click-modal="false">
      <el-form :model=" formdata3" label-width="80px" ref="datalist" >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formdata3.realname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formdata3.email" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobilephone">
          <el-input v-model="formdata3.mobilephone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="formdata3.wechat" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="formdata3.qq" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible3= false">取消</el-button>
        <el-button type="primary" v-on:click="deletemanager(formdata3.id)" :loading="submitLoading">删除管理员</el-button>
      </div>
    </el-dialog>

    <!--创建学院管理员页面-->
    <el-dialog :title="formTitle" :visible.sync="formVisible4" :close-on-click-modal="false">
      <el-form :model=" formdata4" label-width="80px"  :rules="formRules3"ref="datalist" >
        <el-form-item label="账户名" prop="name">
        <el-input v-model="formdata4.username"></el-input>
      </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formdata4.username"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpassword">
          <el-input v-model="formdata4.username"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible4= false">取消</el-button>
        <el-button type="primary" v-on:click="createscm" :loading="submitLoading">创建</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import API from '@/api'
    export default {
      inject:['reload'],//注入依赖
        name: "universityAndSchool",
        data(){
          let validateConfirmPassword = (rule, value, callback) => {
            if (this.dataForm.newPassword !== value) {
              callback(new Error('确认密码与新密码不一致'))
            } else {
              callback()
            }
          };
        return{
          formdata1:{
            id:'',
            name:'',
          },//学校
          formdata2:{
            id:'',
            universityid:'',
            name:'',
          },//学院
          formdata3:{
            id:'',
            realname:'',
            email:'',
            mobilephone:'',
            wechat:'',
            qq:'',
          },//学院管理员信息
          formdata4:{
            schoolid:'',
            universityid:'',
            username:'',

          },//创建学院管理员
          datalist:[],//列表
          listLoading: false, //是否显示加载动画
          submitLoading: false,
          // 分页数据列表--start
          total: 0,
          pageIndex: 1, //页码
          pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
          pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

          // 分页数据列表--end
          action: '', // 'addun'-添加学校，'editun'-编辑学校，'addsc'-添加学院
          claimVisible:false,
          formVisible1:false,
          formVisible2:false,
          formVisible3:false,
          formVisible4:false,
          formTitle: '', //界面标题
          formRules1:{//学校
            name:[
              {required:true,message:'请输入学校名称',trigger:'blue'}
            ]
          },
          formRules2:{//学院
            name:[
              {required:true,message:'请输入学院名称',trigger:'blue'}
            ]
          },
          formRules3: {
            name: [
              { required: true, message: '请输入帐户名', trigger: 'blur' }
            ],
            newPassword: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            confirmPassword: [
              { required: true, message: '请输入确认密码', trigger: 'blur' },
              { validator: validateConfirmPassword, trigger: 'blur' }
            ]
          },
         }
        },
        methods:{
         reloadnow:function () {
          this.reload()
        },//刷新
          //分页
          handleSizeChange(val) { //改变分页大小
            this.pageSize = val;
            this.getuniversity();
          },
          handleCurrentChange(val) { //页码跳转
            this.pageIndex = val;
            this.getuniversity();
          },
          getuniversity:function () {//获取大学以及学院和管理员
            this.listLoading = true;
            let para={
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
            };
            API.university.findUniversityAndSchoolsByCondition2(para).then((res)=>{
              this.listLoading = false;
              this.total=res.data.total;
              this.datalist=res.data.data;
              console.log(this.datalist);
            }).catch(error=>{
              this.listLoading = false;
              console.log(error);
            });
          },
          Adduniversity:function () {//新增学校
           this.formVisible1=true;
           this.formdata1={
             name:'',
           };
           this.action="addun";
           this.formTitle='新增学校';
          },
          Edituniversity:function (index,row) {//编辑学校
            this.formVisible1=true;
            this.formdata1=Object.assign({}, row);
            this.action="editun";
            this.formTitle='编辑学校';
          },
          Deleteuniversity:function (index,row) {//删除学校
            this.$confirm('确认删除该记录吗?', '提示', {
              type: 'warning'
            }).then(() => {
              console.log(row.university.id);
              API.university.removeOneChainById(row.university.id).then((res) => {
                if (res.data.code == 0) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                } else {
                  this.$message({
                    message: '删除失败',
                    type: 'error'
                  });
                }
                this.getuniversity();
              });
            }).catch(() => {
              if (error) console.log(error);
            });
          },
          Addschool:function (index,row) {
            this.formVisible2=true;
            this.formdata2={
              name:'',
              universityid:row.university.id,
            };
            this.action="addsc";
            this.formTitle='新增学院';
          },
          Editschool:function (index,row) {//编辑学院
            this.formVisible2=true;
            this.formdata2=Object.assign({}, row);
            this.formdata2.id=row.school.id;
            this.formdata2.universityid=row.school.universityid;
            this.action="editsc";
            this.formTitle='编辑学院';
          },
          Deleteschool:function (index,row) {//删除学校
            this.$confirm('确认删除该记录吗?', '提示', {
              type: 'warning'
            }).then(() => {
              console.log(row.school.id);
              API.school.removeOneChain(row.school.id).then((res) => {
                if (res.data.code == 0) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                } else {
                  this.$message({
                    message: '删除失败',
                    type: 'error'
                  });
                }
                this.getuniversity();
              });
            }).catch(() => {
              if (error) console.log(error);
            });
          },
          showDeatil:function (index,row) {
           if(row.schoolManager!=null){
             this.formdata3.id=row.schoolManager.id;
             this.formdata3.realname=row.schoolManager.realname;
             this.formdata3.email=row.schoolManager.email;
             this.formdata3.mobilephone=row.schoolManager.mobilephone;
             this.formdata3.wechat=row.schoolManager.wechat;
             this.formdata3.qq=row.schoolManager.qq;
             this.formVisible3=true;
             this.formTitle='学院管理员详情';
           }
           else{
             this.formVisible4=true;
             this.formTitle='创建学院管理员';
           }
          },
          deletemanager:function (num) {
            this.$confirm('确认删除该记录吗?', '提示', {
              type: 'warning'
            }).then(() => {
              console.log(num);
              API.schoolmanager.removeOneByUserId(num).then((res) => {
                if (res.data.code == 0) {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.formVisible3=false;
                } else {
                  this.$message({
                    message: '删除失败',
                    type: 'error'
                  });
                }
                this.getuniversity();
              });
            }).catch(() => {
              if (error) console.log(error);
            });
          },
          createscm:function () {

          },
          SaveSubmit:function () {//保存
           if(this.action=='addun'){
             this.$confirm('确认提交吗？', '提示', {}).then(() => {
               this.submitLoading = true;
               let para = {
                 name:this.formdata1.name,
               };
               // console.log(para);

               API.university.addOne(para).then(res => {
                 this.submitLoading = false;

                 if (res.data.code == 0) {
                   this.$message({
                     message: '提交成功',
                     type: 'success'
                   });
                   // this.$refs['formdata1'].resetFields();
                   this.formVisible1 = false;
                   this.getuniversity(); //重新加载数据
                 } else {
                   this.$message({
                     message: '提交失败',
                     type: 'error'
                   });
                 }
               }).catch((error) => {
                 this.submitLoading = false;
                 if (error) console.log(error);
               });
             });
           }
           else if(this.action=='editun'){
              this.$confirm('确认提交吗？', '提示', {}).then(() => {
                this.submitLoading = true;
                let para={
                  name:this.formdata1.name,
                  id:this.formdata1.university.id,
                };
                console.log(para);
                API.university.modifyOneById(para).then(res => {
                  this.submitLoading = false;

                  if (res.data.code == 0) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    // this.$refs['formdata1'].resetFields();
                    this.formVisible1 = false;
                    this.getuniversity(); //重新加载数据
                  } else {
                    this.$message({
                      message: '提交失败',
                      type: 'error'
                    });
                  }
                }).catch((error) => {
                  this.submitLoading = false;
                  if (error) console.log(error);
                });
              });
            }
           else if(this.action=='addsc'){
              this.$confirm('确认提交吗？', '提示', {}).then(() => {
                this.submitLoading = true;
                let para = {
                  name:this.formdata2.name,
                  universityid:this.formdata2.universityid,
                };
                // console.log(para);

                API.school.addOne(para).then(res => {
                  this.submitLoading = false;

                  if (res.data.code == 0) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    // this.$refs['formdata1'].resetFields();
                    this.formVisible2 = false;
                    this.getuniversity(); //重新加载数据
                  } else {
                    this.$message({
                      message: '提交失败',
                      type: 'error'
                    });
                  }
                }).catch((error) => {
                  this.submitLoading = false;
                  if (error) console.log(error);
                });
              });
            }
           else if(this.action=='editsc'){
             this.$confirm('确认提交吗？', '提示', {}).then(() => {
               this.submitLoading = true;
               let para={
                 name:this.formdata2.name,
                 universityid:this.formdata2.universityid,
                 id:this.formdata2.id,
               };
               console.log(para);
               API.school.modifyOneById(para).then(res => {
                 this.submitLoading = false;

                 if (res.data.code == 0) {
                   this.$message({
                     message: '提交成功',
                     type: 'success'
                   });
                   // this.$refs['formdata1'].resetFields();
                   this.formVisible2 = false;
                   this.getuniversity(); //重新加载数据
                 } else {
                   this.$message({
                     message: '提交失败',
                     type: 'error'
                   });
                 }
               }).catch((error) => {
                 this.submitLoading = false;
                 if (error) console.log(error);
               });
             });
           }
          }
      },
        mounted(){
        this.getuniversity();
      }
    }
</script>

<style scoped>
  .el-row {
    margin-top: -10px;
    margin-bottom: 10px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .refresh{
    float: left;
    margin:7px 5px 0px 5px;
    height: 35px;
    width: 85px;
  }
  .add{
    float: left;
    margin:7px 5px 0px 5px;
    height: 35px;
    width: 110px;
  }
</style>
